if (!Util) {
    var Util = {};
}
// Range Slider Component
Util.Silder = function(container, _option){
    this.options = {
        min: 0,
        max: 100,
        values: [0, 10],
        disabled: false,
        widthOfHandle: 7
    };
    this.onchange = null;
    this.onchanged = null;
    this.element = $(container);
    this.handles;
    this.midHandle;
    this._keySliding = false;
    this._handleIndex = null;
    this._dragStart = false;
    this._lastValPercent;
    this.perHandleWidth = 1;
    this._clickOffset = {
        x: 0,
        y: 0,
        dx: 0
    }; // drag middle the inital positon of mouse.
    if (_option) {
        $.extend(this.options, _option);
    }
    this._init();
}
Util.Silder.prototype = {
    _init: function(){
        var self = this, o = this.options;
        this.element.addClass("rtq-slider");
        this.elementSize = {
            width: this.element.outerWidth(),
            height: this.element.outerHeight()
        };
        this.element.find('.rtq-slider-handle').remove();
        //this.elementOffset = this.element.offset();
        this.perHandleWidth = 100 * this.options.widthOfHandle / this.elementSize.width;
        this.element.append('<div class = "rtq-slider-handle"><a class="rtq-slider-left" href="javascript:void(0)"></a></div><div class="rtq-slider-mid"><a></a></div><div class = "rtq-slider-handle"><a class="rtq-slider-right" href="javascript:void(0)"></a></div>');
        this.handles = this.element.find(".rtq-slider-handle");
        this.handles.each(function(i){
            $(this).data("index.sliderHandle", i);
            $(this).mousedown(function(e){
                var elm = e.target.tagName.toLowerCase();
                if (elm == "a") {
                    self._handleIndex = $(e.target).parent().data("index.sliderHandle");
                    self._startDrag(e);
                }
            });
        });
        this.midHandle = this.element.find(".rtq-slider-mid");
        this.midHandle.find("a").mousedown(function(e){
            self._handleIndex = 2;
            self._clickOffset = self._getMousePostion(e);
            self._clickOffset.dx = 0;
            self._startDrag(e);
        });
        this._refreshValue();
    },
    _startDrag: function(e){
        e.preventDefault();
        this._dragStart = true;
        $(document).bind('mousemove', this, this._mouseDrag);
        $(document).bind('mouseup', this, this._mouseStop);
    },
    _mouseDrag: function(event){
        var self = event.data;
        if (!self._dragStart) {
            return false;
        }
        event.preventDefault();
        var position = self._getMousePostion(event);//{x: event.pageX, y: event.pageY };
        var pixelTotal = self.elementSize.width, pixelMouse, o = self.options;
        var valueTotal = o.max - o.min;
        if (self._handleIndex == 2) { // drag middle.
            var dx = position.x - self._clickOffset.x - self._clickOffset.dx;
            var dv = valueTotal * dx / pixelTotal;
            self._clickOffset.dx += dx;
            self._slide(event, self._handleIndex, dv.toFixed(2));
        }
        else {
            pixelMouse = position.x - self.element.offset().left;
            var percentMouse = (pixelMouse / pixelTotal);
            if (percentMouse > 1) 
                percentMouse = 1;
            if (percentMouse < 0) 
                percentMouse = 0;
            var valueMouse = percentMouse * valueTotal, normValue = o.min + valueMouse;
            self._slide(event, self._handleIndex, normValue.toFixed(2));
        }
        
    },
    _mouseStop: function(event){
        var self = event.data;
        $(document).unbind("mousemove", self._mouseDrag);
        $(document).unbind("mouseup", self._mouseStop);
        self._dragStart = false;
        self._stop(event, self._handleIndex);
        self._handleIndex = null;
    },
    _slide: function(event, index, val){
        var newVal = parseFloat(val);
        var o = this.options;
        var flag = false;
        if (o.values && o.values.length > 1) {
            if (index == 2) { // drag middle.
                var dx = newVal;
                if (o.values[0] + newVal < o.min || o.values[1] + newVal > o.max) {
                    return;
                }
                o.values[0] = o.values[0] + dx, o.values[1] = o.values[1] + dx;
                flag = dx != 0;
            }
            else {
                var otherVal = o.values[index == 1 ? 0 : 1];
                if ((o.values.length == 2) && ((index == 0 && newVal > otherVal) || (index == 1 && newVal < otherVal))) {
                    newVal = otherVal;
                }
                flag = (newVal != o.values[index]);
                if (flag) {
                    o.values[index] = newVal;
                }
            }
            if (flag) {
                if (this.onchange) {
                    this.onchange(o.values);
                }
                this._refreshValue();
            }
        }
    },
    _stop: function(event, index){
        if (this.onchanged) {
            this.onchanged(this.options.values);
        }
    },
    _refreshValue: function(){
        var o = this.options, self = this;
        if (this.options.values && this.options.values.length) {
            var valPercent = [];
            for (var i = 0; i < 2; i++) {
                valPercent[i] = (o.values[i] - o.min) / (o.max - o.min) * 100;
                valPercent[i] = valPercent[i] > (100 - self.perHandleWidth) ? 100 - self.perHandleWidth : valPercent[i];
                valPercent[i] = valPercent[i] < self.perHandleWidth ? self.perHandleWidth : valPercent[i];
            }
            this.handles.each(function(i, j){
                if (i == 0) {
                    $(this).css({
                        width: valPercent[0] + '%'
                    });
                }
                if (i == 1) {
                    $(this).css({
                        left: valPercent[1] + '%',
                        width: (100 - valPercent[1]) + '%'
                    });
                }
            });
            this._lastValPercent = valPercent;
            this.midHandle.css({
                left: valPercent[0] + "%",
                width: valPercent[1] - valPercent[0] + "%"
            });
        }
    },
    _getMousePostion: function(e){
        var de = document.documentElement, b = document.body, pos = {};
        var sl = de && de.scrollLeft || b.scrollLeft || 0, sr = de && de.scrollTop || b.scrollTop || 0;
        if (e.pageX == null && e.clientX != null) { // IE
            pos.x = e.clientX + sl;
            pos.y = e.clientY + sr;
        }
        else {
            pos.x = e.pageX + sl;
            pos.y = e.pageY + sr;
        }
        return pos;
    },
    changeOutSize: function(w, h){
        this.elementSize = {
            width: w,
            height: h
        };
        this.perHandleWidth = 100 * this.options.widthOfHandle / this.elementSize.width;
        this._handleIndex = null;
    },
    setOption: function(op){
        $.extend(this.options, op);
        if (op.values) {
            this._refreshValue();
        }
    },
    clear: function(){
        this.handles.unbind("mousedown");
        this.midHandle.find("a").unbind("mousedown");
        this.handles.remove();
        this.handles = this.midHandle = this.options = this.onchange = this.onchanged = null;
        this.element.removeClass("rtq-slider").removeData("slider").unbind(".slider");
        this.element = null;
    }
};